<template>
  <div class="bgc">
    <div class="amount">
      <div class="amount_head">
        <div class="amount-check-box">
          <div>
            <input type="checkbox" class="custom-control-input" :id="'cb'+AdmRowID" :checked="state" @change="stateChange"/>
            <label class="custom-control-label" :for="'cb'+AdmRowID"></label>
          </div>
          <div class="amt">金额：{{ amount }}元</div>
        </div>
        <div class="to_be_paid">待支付</div>
      </div>
      <div class="clinical_time">就诊时间：{{ clinicaltime }}</div>
    </div>
    <div class="see_doctor">
      <div class="clinic_department">就诊科室：{{ clinicdepartment }}</div>
      <div class="to_see_doctor_doctor">就诊医生：{{ clinicdoctor }}</div>
    </div>
    <div class="pay">
      <div class="check_button">
        <van-button
          @click="onclickGetInfo"
          size="small"
          style="margin-right: 3px"
          >查看</van-button
        >
      </div>
      <div class="payment_button">
        <van-button @click="onclickPay" size="small" type="info"
          >支付</van-button
        >
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
    };
  },
  props: {
    amount: {
      default: "",
      type: String,
    },
    clinicaltime: {
      default: "",
      type: String,
    },
    clinicdepartment: {
      default: "",
      type: String,
    },
    clinicdoctor: {
      default: "",
      type: String,
    },
    AdmRowID: {
      require: true,
      type: String,
    },
    state: {
      default:true,
      type:Boolean
    }
  },
  methods: {
    onclickGetInfo() {
      this.$emit("checkPrescribingInformation");
    },
    onclickPay() {
      this.$emit("payprescription");
    },

    stateChange(e) {
      const newState = e.target.checked;
      this.$emit("state-change", { AdmRowID: this.AdmRowID, value: newState });
    },
  },
};
</script>
<style>
.bgc {
  background-color: #fff;
  margin-top: 15px;
  padding: 20px 30px;
}

.amount_head {
  display: flex;
  justify-content: space-between;
}

.amount-check-box {
  display: flex;
}

.amt {
  margin-left: 4px;
  color: #323233;
  font-size: 14px;
}

.pay {
  display: flex;
  justify-content: flex-end;
}

.to_be_paid {
  font-size: 14px;
}

.clinical_time {
  margin-top: 5px;
  font-size: 12px;
  color: #969799;
}

.see_doctor {
  margin-top: 35px;
}

.pay_bottom {
  margin-top: 15px;
  padding: 0 25px;
  display: flex;
  align-items: center;
}

.merger_payment_button {
  margin-left: 9px;
}

.total_amount {
  margin-left: 118px;
  color: #323233;
  font-size: 14px;
}
</style>
